<template>
  <div id="hot_video">
    <div class="rightBox01">
      <div class="btn_group01">
        <button>热门视频</button>
      </div>
      <div class="rightBox-content">
        <category_industry v-model="industryItemObj"/>
        <section class="filter">
          <p>筛选</p>
          <el_select
            v-model="value06"
            title="观众年龄"
            :options="[
              '不限',
              '18-24',
              '25-30',
              '31-35',
              '36-40',
              '41-45',
              '46-50',
              '其他'
            ]"
          />
          <el_select v-model="value07" title="观众性别" :options="['不限', '男', '女']" />
          <!-- <el_select_city v-model="value08"
          title="观众地域" />-->
        </section>
        <section class="filter">
          <p></p>
          <el_select
            v-model="value03"
            class="ml_28"
            title="视频时长"
            :options="['不限', '0-15s', '16-30s', '31-60s', '60s以上']"
          />
          <el_select
            v-model="value04"
            title="点赞数"
            class="box"
            :options="[
              '不限',
              '10万-50万',
              '50万-100万',
              '100万-200万',
              '>200万'
            ]"
          />
          <multi_select v-model="value05" :options="['是否带货']" />
          <div class="clearBox" @click="clear">
            <img src="@/assets/wang/work/clearAll.png" alt />
            <span>重置筛选条件</span>
          </div>
        </section>
        <section class="btn_input">
          <radio_group01 :radio_values="['24小时', '近3天', '近7天', '近30天', '近90天']" v-model="value09" />
          <section class="input_group">
            <input
              type="text"
              v-model="input01"
              placeholder="请输入关键词在排行榜中搜索"
              @keyup.enter="search_input()"
            />
            <div @click="search_input()" class="imgBox"> <!-- <img src="../../../assets/meng/search01.png" /> -->
            </div>
          </section>
          <div class="btn_group">
            <button @click="generatorImage">
              <span></span>分享
            </button>
            <button @click="export_data">
              <span></span>导出
            </button>
          </div>
        </section>
        <ul
          class="fixedThead"
          ref="fixedThead"
          :class="{ isShow: isFixed }"
          :style="showLeft == true ? 'left:222px' : 'left:98px'"
        >
          <li tc>排名</li>
          <li>视频内容</li>
          <li>达人</li>
          <li tc>视频时长</li>
          <li tc>发布时间</li>
          <li
            tc
            style="  cursor: pointer;"
            @click="sort_fun(false, 1)"
            v-if="order_by == 'desc' && sort != 'favoriteCount'"
          >
            点赞数
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == 'favoriteCount'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li tc v-if="order_by == 'desc' && sort == 'favoriteCount'">
            点赞数
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == 'favoriteCount'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li
            tc
            @click="sort_fun(false, 2)"
            style="  cursor: pointer;"
            v-if="order_by == 'desc' && sort != 'CommentCount'"
          >
            评论数
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == 'CommentCount'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li tc v-if="order_by == 'desc' && sort == 'CommentCount'">
            评论数
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == 'CommentCount'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li
            tc
            @click="sort_fun(false, 3)"
            style="  cursor: pointer;"
            v-if="order_by == 'desc' && sort != 'ShareCount'"
          >
            转发数
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == 'ShareCount'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>

          <li tc v-if="order_by == 'desc' && sort == 'ShareCount'">
            转发数
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == 'ShareCount'"
            />
          </li>
          <li tc>操作</li>
        </ul>
        <table class="table" ref="capture">
          <thead>
            <tr>
              <th>排名</th>
              <th>视频内容</th>
              <th>达人</th>
              <th>视频时长</th>
              <th>发布时间</th>
              <th
                style="  cursor: pointer;"
                @click="sort_fun(false, 1)"
                v-if="order_by == 'desc' && sort != 'favoriteCount'"
              >
                点赞数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="order_by == 'desc' && sort == 'favoriteCount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-if="order_by == 'desc' && sort == 'favoriteCount'">
                点赞数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="order_by == 'desc' && sort == 'favoriteCount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th
                @click="sort_fun(false, 2)"
                style="  cursor: pointer;"
                v-if="order_by == 'desc' && sort != 'CommentCount'"
              >
                评论数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="order_by == 'desc' && sort == 'CommentCount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-if="order_by == 'desc' && sort == 'CommentCount'">
                评论数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="order_by == 'desc' && sort == 'CommentCount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th
                @click="sort_fun(false, 3)"
                style="  cursor: pointer;"
                v-if="order_by == 'desc' && sort != 'ShareCount'"
              >
                转发数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="order_by == 'desc' && sort == 'ShareCount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-if="order_by == 'desc' && sort == 'ShareCount'">
                转发数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="order_by == 'desc' && sort == 'ShareCount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in table_data01"
              :key="'table' + index"
              :id="!index ? 'tr1' : ''"
            >
              <td class="td01">{{ 30 * (page - 1) + index + 1 }}</td>
              <td class="td02">
                <div>
                  <section>
                    <img
                      :src="item.thum_pic"
                      v-if="!item.is_delete"
                      @error="defaultImgFn(video,$event)"
                    />
                    <img src="@/assets/meng/hot_video17.png" v-else />
                    <a :href="item.url" target="_blank">
                      <img src="@/assets/meng/hot_video18.png" style="width:20px;height:20px;" />
                    </a>
                  </section>
                  <section>
                    <p class="pointer" @click="videoDetails(item.aweme_id)">
                      <button v-if="item.is_delete" class="del_btn">已删除或隐藏</button>
                      <span class="text" :class="isShare?'shareState':'initState'">{{ item.title }}</span>
                    </p>
                    <!-- <p>
                      <span>热词：</span>
                      <button
                        :class="{ is_del: item.is_delete }"
                        v-for="(item_son, index_son) in item.hotword.slice(
                          0,
                          3
                        )"
                        :key="index_son + 'key'"
                      >
                        {{ item_son.name }}
                      </button>
                      <span v-if="!item.hotword.length">--</span>
                    </p>-->
                  </section>
                </div>
              </td>
              <td class="td03">
                <img
                  :src="item.logo"
                  alt
                  @click="go_to_page01(item.author_id)"
                  @error="defaultImgFn(superman,$event)"
                />
                <p @click="go_to_page01(item.author_id)">{{ item.nickname }}</p>
              </td>
              <td class="td04">
                <span :class="{ is_del: item.is_delete }">
                  {{
                  format_time(item.duration)
                  }}
                </span>
              </td>
              <td class="td04">
                <span :class="{ is_del: item.is_delete }">
                  {{
                  timestamp(item.release_time, "Y-M-D h:m")
                  }}
                </span>
              </td>

              <td class="td05">
                <!-- <img src="@/assets/meng/l.png"> -->
                <span>{{ format_num(item.favorite_count) }}</span>
              </td>
              <td class="td06">
                <!-- <img src="@/assets/meng/c.png"> -->
                <span>{{ format_num(item.comment_count) }}</span>
              </td>
              <td class="td07">
                <!-- <img src="@/assets/meng/s.png"> -->
                <span>{{ format_num(item.share_count) }}</span>
              </td>
              <td class="td08">
                <button @click="videoDetails(item.aweme_id)">查看详情</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="upgradeBox" v-if="!permissions && !loading">
          <RankUpgrade class="rankUpgrade" />
        </div>
        <!-- <div class="upgradeBox" v-if="permissions && !loading && vipLevel==0">
          <RankUpgrade class="rankUpgrade" />
        </div> -->
        <!-- <p
          class="nothing"
          v-show="
            table_data01.length < 30 &&
              !loading &&
              permissions &&
              table_data01.length != 0
          "
        >我是有底线的～</p> -->
        <div class="pageBox" v-if="!loading && needing">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="count"
            :page-size="30"
            :current-page="page"
            @current-change="get_data"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>
        <div
          v-loading="loading"
          v-if="loading"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <div class="empty" v-show="!needing && !loading">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <pop v-if="dialog" v-model="dialog" :id="video_id" :index="active_name01" />
  </div>
</template>
<script>
import html2canvas from 'html2canvas';
import pop from '@/pages/meng/video/pop';
import RankUpgrade from '@/component/rankUpgrade.vue';
import video from '@/assets/img/video.png';
import superman from '@/assets/img/superman.png';
import category_industry from '@/component/category_industry';
export default {
  name: 'hot_video',
  components: { pop, RankUpgrade,category_industry },
  data() {
    return {
      video: video,
      superman: superman,
      permissions: 1,
      dialog: false,
      video_id: '',
      active_name01: '1',
      //   以上是弹出窗
      active_name: '0',
      busy: false,
      loading: true,
      table_data01: [],

      page: 1,
      count: 0,
      permissions: 1,
      cancel01: null,
      needing: true,
      input01: '',
      value03: '不限',
      value04: '不限',
      value05: '',
      value06: '不限',
      value07: '不限',
      value08: '不限,不限',
      value09: '24小时',
      order_by: 'desc', //   表格头部排序
      sort: 'favoriteCount', //   表格头部排序
      showLeft: true,
      isFixed: false,
      offsetTop: 0,
      vipLevel: '',
      isShare:false, //点击分享按钮 设为true,图片生成完成 设为false
      industryItemObj:{
        name:'全部',
        id:'0'
      }
    };
  },
  computed: {
    listen_change() {
      const {
        industryItemObj,
        value02,
        value03,
        value04,
        value05,
        value06,
        value07,
        value08,
        value09,
        order_by,
        sort
      } = this;
      return {
        industryItemObj,
        value02,
        value03,
        value04,
        value05,
        value06,
        value07,
        value08,
        value09,
        order_by,
        sort
      };
    }
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel'); //会员等级
    this.get_data();
    this.$watch(
      'listen_change',
      this.debounce((newValue, oldValue) => {
        this.page = 1;
        this.table_data01 = [];
        this.get_data();
      }, 0)
    );
  },
  watch: {
        // 搜索为空时自动刷新榜单
    input01: function (newVal, oldVal) {
      if (newVal == '') {
        this.table_data01 = [];
        this.page = 1;
        this.get_data();
      }
    },
    '$store.state.left_nav_flag'(old, newOld) {
      this.showLeft = newOld;
      if ((newOld = false)) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight);
    window.addEventListener('resize', () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },
  methods: {
    // 头像显示默认图片
    defaultImgFn(val, e) {
      console.log(val);
      if (val == video) {
        e.target.src = video;
      } else if (val == superman) {
        e.target.src = superman;
      }
    },
    videoDetails(id) {
      let router = this.$router.resolve({
        path: '/talent_main/videoDetails',
        query: { id }
      });
      window.open(router.href, '_blank');
      // this.$router.push({ path: '/talent_main/videoDetails', query: { id } })
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector('#tr1');
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + 'px';
          }
        }
      });
    },
    // 收藏
    add_star(flag, item, index) {
      let that = this;
      if (flag) {
        this.$axios
          .post('/api/collection/InsertCollection', {
            CollectId: item.aweme_id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then(res => {
            if (res.data.code == 0) {
              this.$set(this.table_data01[index], 'is_collec', 1);
              this.$message({
                message: '收藏成功！',
                type: 'success',
                duration: 2000
                // offset: '400',
              });
            } else {
              this.$message({
                message: '收藏失败！',
                type: 'error',
                duration: 2000
                // offset: '400',
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$axios
          .post('/api/collection/CancelCollection', {
            CollectId: item.aweme_id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then(res => {
            if (res.data.code == 0) {
              this.$set(this.table_data01[index], 'is_collec', 0);
              this.$message({
                message: '取消收藏成功！',
                type: 'success',
                duration: 2000
                // offset: '400',
              });
            } else {
              this.$message({
                message: '取消收藏失败！',
                type: 'error',
                duration: 2000
                // offset: '400',
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    //   表格头部排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.order_by = 'asc';
      } else {
        this.order_by = 'desc';
      }
      switch (parm02) {
        case 1:
          this.sort = 'favoriteCount';
          break;
        case 2:
          this.sort = 'CommentCount';
          break;
        case 3:
          this.sort = 'ShareCount';
          break;
      }
    },
    clear() {
      this.industryItemObj = {
        name:'全部',
        id:'0'
      };
      this.value03 = '不限';
      this.value04 = '不限';
      this.value05 = '';
      this.value06 = '不限';
      this.value07 = '不限';
      this.value08 = '不限,不限';
    },
    search_input() {
      this.page = 1;
      this.table_data01 = [];
      this.get_data();
    },

    get_data(cpage) {
      let that = this;
      if (cpage) {
        that.page = cpage;
        that.backTop();
      }
      this.table_data01 = [];
      this.loading = true;
      this.busy = true;
      let duration;
      switch (this.value03) {
        case '不限':
          duration = '不限';
          break;
        case '0-15s':
          duration = '0-15000';
          break;
        case '16-30s':
          duration = '16000-30000';
          break;
        case '31-60s':
          duration = '31000-60000';
          break;
        case '60s以上':
          duration = '60000-999999999999999';
          break;
      }
      let favorite;
      switch (this.value04) {
        case '不限':
          favorite = '不限';
          break;
        case '<1万':
          favorite = '0-10000';
          break;
        case '1万-10万':
          favorite = '10000-100000';
          break;
        case '10万-50万':
          favorite = '100000-500000';
          break;
        case '50万-100万':
          favorite = '500000-1000000';
          break;
        case '100万-200万':
          favorite = '1000000-2000000';
          break;
        case '>200万':
          favorite = '2000000-99999999999';
          break;
      }
      let time;
      switch (this.value09) {
        case '1小时':
          time = '1h';
          break;
        case '3小时':
          time = '3h';
          break;
        case '6小时':
          time = '6h';
          break;
        case '12小时':
          time = '12h';
          break;
        case '24小时':
          time = '24h';
          break;
        case '近3天':
          time = '3d';
          break;
        case '近7天':
          time = '7d';
          break;
        case '近30天':
          time = '30d';
          break;
        case '近90天':
          time = '90d';
          break;
      }

      this.$axios
        .post(
          '/api/aweme/search',
          {
            keyword: this.trimStr(that.input01),
            size: 30,
            page: that.page,
            category: this.industryItemObj.id,
            duration: duration,
            favorite_count: favorite,
            is_pro: that.value05 != '' ? 1 : 0,
            more_age: that.value06,
            more_gender: that.value07 == '女' ? 2 : that.value07 == '男' ? 1 : 3,
            more_province: that.value08.split(',')[0],
            more_city: that.value08.split(',')[1],
            time,
            order_by: that.order_by,
            sort: that.sort
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            })
          }
        )
        .then(response => {
          this.loading = false;
          if (response.data.code1 == 1013||response.data.code == 1003||response.data.code ==1013) {
            this.permissions = 0;
            this.table_data01 = [];
          } else {
            this.permissions = 1;
          }
          if (response.data.code == 1002) {
            this.needing = false;
          } else {
            this.needing = true;
          }
          if (response.data.code == 0) {
            this.table_data01 = response.data.data;
            this.setTBBar();

            that.count = response.data.count;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    generatorImage() {
      this.isShare = true;
      setTimeout(()=>{
        if (!this.table_data01.length) return;
        var that = this;
        const loading = this.$loading({
          lock: true,
          text: '导出中...',
          spinner: 'el-icon-loading',
          customClass: 'customClass'
        });
        var shareContent;
        shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        var canvas = document.createElement('canvas'); //创建一个canvas节点
        //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
        var scale = 1;
        canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale * scale; //定义canvas高度 *缩放
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        canvas.getContext('2d').scale(scale, scale); //获取context,设置scale
        var opts = {
          dpi: window.devicePixelRatio,
          scale: scale, // 添加的scale 参数
          useCORS: true,
          canvas: canvas, //自定义 canvas
          logging: true //日志开关
        };
        html2canvas(shareContent, opts).then(canvas => {
          let str;
          str = `《热门视频排行榜-${this.timestamp(new Date().getTime() / 1000, 'Y-M-D')}》.png`;
          canvas.toBlob(
            function (blob) {
              const eleLink = document.createElement('a');
              eleLink.download = str;
              eleLink.style.display = 'none';
              // 字符内容转变成blob地址
              eleLink.href = URL.createObjectURL(blob);
              // 触发点击
              document.body.appendChild(eleLink);
              eleLink.click();
              // 然后移除
              document.body.removeChild(eleLink);
            },
            'image/png',
            1
          );
          this.isShare = false;
          loading.close();
        });
      });
    },
    export_data() {
      if (!this.table_data01.length) return;
      let that = this;
      let str = `排名,视频内容,时长,达人,发布时间,点赞数,评论数,转发数\n`;
      for (let i = 0; i < that.table_data01.length; i++) {
        str += `${i + 1},\"${that.table_data01[i].title.replace(/"/g, '""')}\",${that.format_time(
          that.table_data01[i].duration
        )}\t,${that.table_data01[i].nickname},${that.timestamp(
          that.table_data01[i].release_time,
          'Y年M月D日'
        )}\t,${that.format_num(that.table_data01[i].favorite_count)},${that.format_num(
          that.table_data01[i].comment_count
        )},${that.format_num(that.table_data01[i].share_count)}\n`;
      }
      var blob = new Blob([str], { type: 'text/plain;charset=utf-8' }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement('a');
      link.href = object_url;
      let str_name = `《热门视频排行榜-${that.timestamp(
        new Date().getTime() / 1000,
        'Y-M-D'
      )}》.csv`;
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.isFixed = scrollTop > 300 ? true : false;
    }
  }
};
</script>
<style scoped lang="less">
/* 搜索框 */
.imgBox {
  background: url('../../../assets/wang/talentCompare/search-nohover.png') no-repeat 10px 7px, #fff;
  background-size: 15px 15px;
}
.imgBox:hover {
  background: url('../../../assets/wang/talentCompare/search.png') no-repeat 10px 7px, #fff;
  background-size: 15px 15px;
}
table {
  thead {
    tr {
      > th:nth-child(1) {
        width: 5.7%;
      }
      > th:nth-child(2) {
        width: 28%;
        text-align: left;
      }
      > th:nth-child(3) {
        text-align: left;
        width: 190px;
        padding-left: 15px;
      }
      > th:nth-child(4) {
        width: 8%;
      }
      > th:nth-child(5) {
        width: 8%;
      }
      th:nth-child(6)， th:nth-child(7),
      th:nth-child(8) {
        width: 8%;
      }
    }
    img {
      width: 5px;
      height: 10px;
      vertical-align: 0;
      margin-right: 2px;
      cursor: pointer;
    }
  }
  tbody {
    tr {
      .td08 {
        button {
          width: 88px;
          height: 32px;
          background-color: transparent;
          border-radius: 4px;
          border: 1px solid #fd7f2c;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30px;
          letter-spacing: 0px;
          color: #fd7f2c;
          text-align: center;
        }
        button:hover {
          color: #ff924b;
          border-color: #ff924b;
        }
      }
      .td05,
      .td06,
      .td04,
      .td07 {
        font-size: 15px;
        font-family: DINAlternate-Bold;
        img {
          width: 16px;
          margin-right: 3px;
          vertical-align: -2px;
        }
      }
      .td03 {
        display: flex;
        font-size: 14px;
        color: #222222;
        font-weight: 600;
        align-items: center;
        justify-content: left;
        img {
          border-radius: 50%;
          width: 50px;
          height: 50px;
          margin-right: 11px;
          border: 1px solid #e5e5e5;
          cursor: pointer;
        }
        > p {
          width: 100px;
          display: block;
          box-sizing: border-box;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
        }
        > p:hover {
          color: #ff924b;
        }
      }
      .td01 {
        font-size: 15px;
        font-family: DINAlternate-Bold;
      }
      .td02 {
        width: 15% !important;
        text-align: left;
        > div {
          width: 100%;
          display: flex;
          align-items: center;
          > section:nth-child(2) {
            width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .text {
              font-size: 14px;
              font-weight: 600;
              color: #222;
              overflow: hidden;
              &.initState{
                display: -webkit-box;
                width: 300px;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
              &.shareState{
                display: inline-block;
                max-width: 300px;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .text:hover {
              color: #ff924b;
            }
            > p:nth-child(1) {
              .del_btn {
                width: 100px;
                height: 26px;
                background-color: #f5f5f5;
                border-radius: 4px;
                border: solid 1px #e5e5e5;
                text-align: center;
                font-size: 14px;
                color: #888888;
                line-height: 22px;
                margin-right: 10px;
                vertical-align: 1px;
              }
            }
            > p:nth-child(1):hover {
              color: #ff924b;
            }
            > p:nth-child(2) {
              margin-top: 4px;
              > span:nth-child(2) {
                font-size: 14px;
                color: #222222;
              }
              > span:nth-child(1) {
                font-size: 14px;
                color: #888888;
              }
              .is_del {
                color: #888888 !important;
                border: solid 1px #e5e5e5 !important;
              }
              > button:nth-child(2) {
                margin-left: 0;
              }
              > button {
                padding: 3px 9px;
                padding-top: 2px;
                font-size: 14px;
                color: #fd7f2c;
                text-align: center;
                border-radius: 17px;
                border: solid 1px #fd7f2c;
                margin-left: 8px;
                background: transparent !important;
              }
            }

            > p:nth-child(3) {
              > span:first-child {
                font-size: 14px;
                color: #888888;
              }
              > span:last-child {
                font-size: 14px;

                color: #888;
              }
              .is_del {
                color: #888888 !important;
              }
            }
          }
          > section:nth-child(1):hover {
            > a {
              display: block !important;
            }
          }
          > section:nth-child(1) {
            margin-right: 11px;
            position: relative;
            width: 50px;
            border-radius: 6px;
            height: 50px;
            overflow: hidden;
            > img {
              //   border: 1px solid #e6e6e6;
              width: 100%;
            }
            > a {
              position: absolute;
              top: 50%;
              cursor: pointer;
              left: 50%;
              transform: translate(-50%, -50%);
              display: none;
            }
          }
        }
      }

      td {
        height: 78px;
        text-align: center;
      }
    }
  }
}
.btn_input {
  margin-bottom: 14px;
  position: relative;
  #radio_group01 {
    display: inline-block;
  }
  .input_group {
    display: inline-block;
    margin-left: 28px;
    position: relative;
    width: 308px;
    height: 32px;
    border-radius: 4px 4px 4px 4px;
    border: solid 1px #e5e5e5;
    box-sizing: border-box;
    input {
      width: 100%;
      font-size: 14px;
      height: 100%;
      box-sizing: border-box;
      padding-left: 11px;
      padding-right: 38px;
      vertical-align: -1px;
      color: #222;
      border: none;
    }
    input::-webkit-input-placeholder {
      color: #b5b5b5 !important;
    }
    > div {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: 0px;
      width: 38px;
      height: 30px;
      border-left: 1px solid #e5e5e5;
      border-radius: 0px 4px 4px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 15px;
      }
    }
  }
  .btn_group {
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
    button {
      width: 70px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 14px;
      // line-height: 30px;
      box-sizing: border-box;
      color: #555;
      text-align: center;
    }
    button:nth-of-type(2) {
      color: #67ac5b;
      border: 1px solid #67ac5b;
    }

    > button:nth-child(1) {
      margin-right: 10px;
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../assets/zhao/fenx.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    > button:nth-child(2) {
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../assets/zhao/daoc.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    button:nth-of-type(1):hover {
      color: #777;
      span {
        background: url('../../../assets/zhao/fenx_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    button:nth-of-type(2):hover {
      color: #80be76;
      border-color: #80be76;
      span {
        background: url('../../../assets/zhao/daoc_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}

.filter {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  > button {
    width: 110px;
    height: 32px;
    background-color: #fd7f2c;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin-left: 40px;
    line-height: 30px;
  }
  > p:first-child {
    font-size: 14px;
    color: #888888;
    margin-right: 50px;
    line-height: 32px;
    white-space: nowrap;
  }
  #el_select {
    margin-right: 30px;
  }
  .clearBox {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 30px;
    img {
      width: 15px;
      height: 16px;
    }
    span {
      font-size: 14px;
      color: #888888;
      padding-left: 5px;
    }
  }
}

#hot_video {
  height: fit-content;
  margin-top: @margin-num;
  margin-left: @margin-num;
  margin-right: @margin-num;
  min-height: 100vh;
  .rightBox01 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 6px;
    .btn_group01 {
      button {
        font-size: 14px;
        background-color: #fd7f2c;
        color: #ffffff !important;
        padding-left: 23px;
        padding-right: 23px;
        height: 40px;
        border-radius: 4px;
        margin-right: 7px;
        font-weight: 600;
      }
    }
  }
  .rightBox-content {
    background-color: #ffffff;
    border-radius: 6px;
    margin-top: 10px;
    padding: 20px 20px 0 20px;
    min-height: 100vh;
    padding-bottom: 1px;
  }
}
// 升级会员
.upgradeBox {
  min-height: 60vh;
  position: relative;
  .rankUpgrade {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  //   background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 99;
  font-size: 0;
  background-color: #f5f9ff;
  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }
  li:nth-child(3) {
    padding-left: 10px;
  }
  img {
    width: 5px;
    height: 10px;
    vertical-align: -1px;
  }
  &.isShow {
    display: block;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
</style>
